<template>
  <Layout class="edgex-page">
    <div class="grid p-4 gap-y-4 help-content">
      <Top />
      <Bottom />
      <Middle />
    </div>
    <AddServiceModal />
  </Layout>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Layout from "@/layout/index.vue";
import Top from "./layouts/edgex/Top.vue";
import Middle from "./layouts/edgex/Middle.vue";
import Bottom from "./layouts/edgex/Bottom.vue";
import notification from "ant-design-vue/es/notification";
import { docCookies } from "@/utils/docCookie";
import AddServiceModal from "@/components/modals/AddServiceModal.vue";

export default defineComponent({
  name: "Edgex",
  components: {
    Layout,
    Top,
    Middle,
    Bottom,
    AddServiceModal,
  },
  setup() {
    onMounted(() => {
      const dom = document.querySelector(".help-content");
      const ifVeg = docCookies.getItem("help");
      if (dom instanceof HTMLDivElement && !ifVeg) {
        docCookies.setItem("help", true, 36000);
        dom.style.opacity = "0.5";
        notification["warning"]({
          message: "新手导航",
          description: `新手载入，可以点击正上方的红色 ↑ 帮助手册进入新手引导`,
          style: {
            width: "400px",
            marginTop: `50px`,
          },
          onClose: () => {
            dom.style.opacity = "1";
          },
          duration: 0,
        });
      }
    });
    return {};
  },
});
</script>

<style scoped lang="scss"></style>
